<template>
    <div class="update">
        <div class="content">
            <h3>{{ personal ? '个人中心' : '修改用户资料' }}</h3>

            <el-form ref="form" :model="form" label-width="80px">
                <!-- 头像上传 -->
                <el-form-item class="update-avatar" label="用户头像">
                    <el-upload 
                    :action="action" 
                    name="avatar"
                    :show-file-list="false"
                    :headers="uploaderHeader"
                    :on-success="handleAvatarSuccess"
                    :disabled="personal"
                    >
                        <img class="avatar" :src="form.avatar || _imgPath('touxiang.png')" alt="图片加载出错、、、">
                    </el-upload>
                </el-form-item>

                <!-- 用户名 -->
                <el-form-item label="用户名">
                    <el-input disabled v-model="_user.username"></el-input>
                </el-form-item>

                <!-- 用户密码 -->
                <el-form-item v-show="!personal" label="用户密码">
                    <el-input v-model="form.password" show-password></el-input>
                </el-form-item>

                <!-- 手机号码 -->
                <el-form-item label="手机号码">
                    <el-input :disabled="personal" v-model="form.phone"></el-input>
                </el-form-item>

                <!-- 电子邮箱 -->
                <el-form-item label="电子邮箱">
                    <el-input :disabled="personal" v-model="form.email"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button :disabled="personal" type="primary" @click="onSubmit">修改</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { avatar as action, req_phone, req_email } from '../../utils/config'
import { update_user } from '../../http/users'
export default {
    props: ['personal'],
    data() {
        return {
            form: {
                avatar: '', 
                password: '',
                phone: '',
                email: ''
            },
            uploaderHeader: {
                authorization: 'Bearer ' + sessionStorage.getItem('token')
            },
            action
        }
    },
    computed: {
        ...mapGetters({
            _user: 'user'
        })
    },
    methods: {
        ...mapActions(['user']),

        handleAvatarSuccess(file) {
            this.form.avatar = file.results.path
        },

        // 提交修改资料
        onSubmit() {
            if (this.form.password) {
                if (this.form.password.length < 6 || this.form.password.length > 20) {
                    return this.$message.error('密码格式不对，长度在6 - 20位！')
                }
            }

            if (this.form.phone) {
                if (!req_phone.test(this.form.phone)) {
                    return this.$message.error('请输入正确的手机号码！')
                }
            }

            if (this.form.email) {
                if (!req_email.test(this.form.email)) {
                    return this.$message.error('请输入正确的电子邮箱！')
                }
            }

            this.form._id = this._user._id

            // 调用接口修改用户资料
            update_user(this.form).then(res => {
                if (res.status) {
                    let user_info = JSON.parse(sessionStorage.getItem('user'))

                    if (this.form.phone) {
                        user_info.phone = this.form.phone
                    }

                    if (this.form.email) {
                        user_info.phone = this.form.email
                    }

                    if (this.form.avatar) {
                        user_info.avatar = this.form.avatar
                    }

                    this.user(user_info)
                    this.$emit('cancel')
                }
            })
        },

        // 取消提交修改
        cancel() {
            this.form = {
                avatar: '', 
                password: '',
                phone: '',
                email: ''
            }
            this.$emit('cancel')
        }
    },
    mounted() {
        this.form.avatar = this._user.avatar

        // 查看个人资料
        if (this.personal) {
            this.form.avatar = this._user.avatar
            this.form.phone = this._user.phone
            this.form.email = this._user.email
        }
    }
}
</script>

<style lang="less" scoped>
.update {
    color: #000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(190, 131, 131, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;

    .content {
        margin-top: -300px;
        width: 500px;
        border-radius: 8px;
        padding: 20px;
        background-color: #fff;

        h3 {
            text-align: center;
        }

        .update-avatar {
            /deep/ .el-form-item__label {
                line-height: 80px;
            }

            .avatar {
                width: 80px;
                height: 80px;
                border-radius: 50%;
            }
        }

    }
}
</style>
